<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>提示框</title>
		<link rel="stylesheet" href="css/weui.css" />
		<link rel="stylesheet" href="css/example.css" />
	</head>

	<body>
		<div class="page">
			<div class="hd">
				<h1 class="page_title">Toast</h1>
			</div>
			<div class="bd spacing">
				<a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</a>
				<a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>
			</div>
			<!--BEGIN toast-->
			<div id="toast" style="display: none;">
				<div class="weui_mask_transparent"></div>
				<div class="weui_toast">
					<i class="weui_icon_toast"></i>
					<p class="weui_toast_content">已完成</p>
				</div>
			</div>
			<!--end toast-->

			<!-- loading toast -->
			<div id="loadingToast" class="weui_loading_toast" style="display:none;">
				<div class="weui_mask_transparent"></div>
				<div class="weui_toast">
					<div class="weui_loading">
						<div class="weui_loading_leaf weui_loading_leaf_0"></div>
						<div class="weui_loading_leaf weui_loading_leaf_1"></div>
						<div class="weui_loading_leaf weui_loading_leaf_2"></div>
						<div class="weui_loading_leaf weui_loading_leaf_3"></div>
						<div class="weui_loading_leaf weui_loading_leaf_4"></div>
						<div class="weui_loading_leaf weui_loading_leaf_5"></div>
						<div class="weui_loading_leaf weui_loading_leaf_6"></div>
						<div class="weui_loading_leaf weui_loading_leaf_7"></div>
						<div class="weui_loading_leaf weui_loading_leaf_8"></div>
						<div class="weui_loading_leaf weui_loading_leaf_9"></div>
						<div class="weui_loading_leaf weui_loading_leaf_10"></div>
						<div class="weui_loading_leaf weui_loading_leaf_11"></div>
					</div>
					<p class="weui_toast_content">数据加载中</p>
				</div>
			</div>

		</div>
	</body>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
			//toast
			$('#showToast').on('click', function(e) {
				var $toast = $('#toast');
				if ($toast.css('display') != 'none') {
					return;
				}
				$toast.show();
				setTimeout(function() {
					$toast.hide();
				}, 2000);
			});
			//loading
			$('#showLoadingToast').on('click', function(e) {
				var $loadingToast = $('#loadingToast');
				if ($loadingToast.css('display') != 'none') {
					return;
				}
				$loadingToast.show();
				setTimeout(function() {
					$loadingToast.hide();
				}, 2000);
			});
		})
	</script>

</html>